<template>
  <div class="common-layout">
    <nav>
        <div class="munber1" v-show="showa"><p>2</p></div>
        <i @click="$router.push('/order')">订单</i>
        <div id="car" @click="$router.push('/car')">
            <div class="munber" v-show="showa"><p>{{num.conut}}</p></div>
            <img src="@/assets/images/car.png" alt="">
        </div>
         <p @click="$router.push('/person')">个人中心</p>
        <div id="search" v-show="showa">
            <img src="@/assets/images/seach.png" alt="">
        </div>
          <div class="demo-input-size">
    <el-input  v-model="input2" class="w-10 m-3" placeholder="搜索"  :prefix-icon="Search" v-show="showa"/>
  </div>
        <p v-show="showa" id="username">欢迎登录！admin</p>
        <!-- <el-button type="success" plain id="btn" @click="cancal()" v-show="showa">退出登录</el-button> -->
        <el-button type="success" plain id="btn" @click="$router.push('/login')" v-show="showIt">登录</el-button>
        <el-button type="success" plain id="btn" @click="$router.push('/register')" v-show="showIt">注册</el-button>
    </nav>
    <div class="home">
<!--轮播图-->
    <swiper-com></swiper-com>
  </div><hr>
<home-middle></home-middle>
 <div class="products-box">
            <h1>百果铺子</h1>
            <div class="row">
                <el-button type="success" plain @click=" allShow" > 所有 </el-button>
                <el-button type="success" plain @click="toNew"> 新款 </el-button>
                <el-button type="success" plain @click="toSale"> 热售 </el-button>
            </div><hr>

        <div id="listBox">
            <div class="best-seller"  v-for="n in newGoods" :key="n.productId" v-show="isShow">
                    <div class="products-single fix">
                        <!-- params:{data1:JSON.stringify(n)}传递参数 get请求 <router-link :to="{name:'test',params: { userId: 123,userName:'xia' }}">跳转</router-link> -->
                          <router-link :to="{name:'goodsDetials',query:{data1:JSON.stringify(n)}}">
                          <div class="box-img-hover">
                            <div class="type-lb">
                                <p class="new">{{n.shopstatus}}</p>
                            </div>
                            <img :src="n.imgs" class="img-fluid" alt="Image" >
                        <div class="why-text">
                           <h5> ${{n.realprice}}元/kg</h5>
                        </div>
                        </div>
                            </router-link>

                            <el-button color="#b0b436"  id="btnList" @click="$router.push({name:'carView',query:{data1:JSON.stringify(n)}})" >添加购物车</el-button>
                    </div>
                </div>
                <div class="best-seller"  v-for="g in goods" :key="g.productId" v-show="isShow1">
                    <div class="products-single fix">
                        <router-link :to="{name:'goodsDetials',query:{data1:JSON.stringify(g)}}">
                            <div class="box-img-hover">
                            <div class="type-lb">
                                <p class="sale">{{g.shopstatus}}</p>
                            </div>
                            <img :src="g.imgs" class="img-fluid" alt="Image" >
                        <div class="why-text">
                           <h5> ${{g.realprice}}元/kg</h5>
                        </div>
                        </div>
                        </router-link>
                            <el-button color="#b0b436"  id="btnList" @click="$router.push({name:'carView',query:{data1:JSON.stringify(g)}})">添加购物车</el-button>
                    </div>
                </div>
            </div>

        <!-- 分页标签 -->
        <!-- <el-pagination
           :page-size="8"
            layout="prev, pager, next"
            :total="changePage.total"
            class="pageNext"
            @current-change="handleCurrentChange"
            v-model:currentPage="changePage.currentPage"
            background>
        </el-pagination> -->

        <!-- <el-skeleton /> -->
        <div class="loading">
          <img src="@/assets/images/loading.gif" alt="">
        </div>
      </div>

    <el-footer>
         <div id="imgfooter2">
             <p>自建物流 | 服务保障 | 质量保证</p>
             <p><img src="@/assets/images/footer.png">
             <img src="@/assets/images/footer1.png">
             <img src="@/assets/images/footer2.png">
             <img src="@/assets/images/footer3.png">
             <img src="@/assets/images/footer4.png"></p>
             </div>
             <!-- <hr> -->
        <footer>
        <div class="row justify-content-center">
          <p id="p1">合作伙伴</p>
        </div>
         <div class="row justify-content-md-center">
          <span id="p2">企业培训| 合作事项| 版权投诉</span>
        </div>
        <div class="row justify-content-md-center">
          <p id="p3">渝ICP  备1378633 @2019-2-2222 jxsxndjdd  Pnsaxx by sxcjhx</p>
        </div>
        </footer>
    </el-footer>
  </div>
</template>

<script>
import { reqSaleDetials, reqNewDetials } from '@/api/allMsg'
import { ElMessage } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
// import { Search } from '@element-plus/icons-vue'
import SwiperCom from '@/components/swiperCom'
import HomeMiddle from '@/components/homeMiddle'
// import { useRouter } from 'vue-router'
export default {
  name: 'HomeView',
  components: { SwiperCom, HomeMiddle },
  setup () {
    const isShow = ref(true)
    const isShow1 = ref(true)

    const showIt = ref(true)
    const showa = ref(false)
    const input2 = ref('')
    // const router = useRouter()

    // 热售产品的接口数据
    const goods = ref('')
    const newGoods = ref('')
    onMounted(async () => {
      const resSale = await reqSaleDetials()
      goods.value = resSale.data.data

      const resNew = await reqNewDetials()
      newGoods.value = resNew.data.data
    })

    // 异步请求接口方法
    // methods:{
    //     async getData(){
    //         try {
    //             const res = await getDataApi();
    //             newGoods.value = res.data.data
    //         } catch(error){}
    //     }
    // }

    // //举例请求分页（ts）
    // const getList = (arr:lisInt[]) => {
    //     for (let index = 0; index < arr.length; index +=10){
    //         let list:any = arr.slice(index, index +10 )
    //         data.list.push(list)
    //     }
    // }

    // 分页数据获取
    //   const handleCurrentChange = (page:number)=> {
    //    data.page = page - 1
    //     }

    const token = window.localStorage.getItem('token')
    if (token) {
      showIt.value = false
      showa.value = true
    }
    // 退出登录
    function cancal () {
      showIt.value = true
      showa.value = false
      window.localStorage.removeItem('token')
    }

    const num = reactive({ conut: 1 })
    function addToCar () {
      num.conut += 1
      ElMessage({
        message: '添加成功！',
        type: 'success'
      })
    }

    function toSale () {
      isShow1.value = true
      isShow.value = false
    }
    function toNew () {
      isShow1.value = false
      isShow.value = true
    }
    function allShow () {
      isShow.value = true
      isShow1.value = true
    }

    // const changePage = reactive({
    //   currentPage: 1, // 默认当前页面为1
    //   total: Number('20') // 总共有多少数据
    // })
    // // 这里是获取当前页数
    // const handleCurrentChange = (val) => {
    //   changePage.currentPage = val
    // }

    return {
      input2,
      addToCar,
      num,
      showIt,
      showa,
      goods,
      newGoods,
      isShow,
      toSale,
      isShow1,
      toNew,
      allShow,
      cancal
      // changePage,
      // handleCurrentChange
      //  intoDatils
    }
  }
}
</script>
<style scoped>
#imgfooter2>p{
    font-size: 35px;
    font-weight: bolder;
    color:#b0b436;
    text-align: center;
    padding-top: 30px;
}
#imgfooter2 img{
    margin-left: 20px;
}
.demo-input-size{
    width: 200px;
    position: absolute;
    margin-left: 83%;
    margin-top: 12px;
}
i{
    position:absolute;
    color:#b0b436;
    font-size: 22px;
    margin:15px;
    cursor: pointer;
}
#car>img{
    width:35px;height: 35px;
    position:absolute;
    margin-top: 10px;
    margin-left: 100px;
    cursor: pointer;
}
#search>img{
     width:25px;height: 25px;
    position:absolute;
    margin-top: 16px;
    margin-left: 93%;
    z-index:1;
}
.common-layout{
    /* background-color: #f3f3f1; */
    margin: 0;padding: 0;
}
nav{
    margin:0;padding:0;
    width: 100%;
    height: 60px;
    background-color:black;
    margin: 0;padding: 0;
}
#btn{
    float:right;
    /* margin-right: 400px; */
    margin: 10px;
}
h1{
        text-align: center;
    }
    .row{
        text-align: center;
    }
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    #listBox{
        display: flex;
        flex-wrap: wrap;
        /* justify-content:space-around; */
        margin-left:40px;
        /* background-color: white; */
    }
    .best-seller{
        width: 340px;
        height: 420px;
        background-color:aliceblue;
        margin:10px;
        text-align: center;
        border:2px solid #dfdfdd;
        border-bottom: 8px solid #dfdfdd;
        /* border-right: 8px solid #dfdfdd; */
        cursor: pointer;
        transition: all 0.9s;
    }
    .best-seller:hover{
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.4);
    margin-top: 10px;
    }
    .best-seller img{
        width: 340px;
        height: 280px;
    }
    .sale{
        color:#b0b436;
        font-weight: bolder;
    }
    .new{
        color:#87da23;
        font-weight: bolder;
    }

   #btnList{
         margin-left: -52px;
        margin-top: -10px;
        position: absolute;
        color:white;
    }
    .why-text{
        margin-top: -8px;
    }
    .pageNext{
        margin-left: 670px;
        margin-top: 40px;
    }
    footer{
    width: 100%;
    height: 100%;
    background-color:black;
    color:white;
    margin-top:40px;
    }
    .munber{
        width: 25px;height: 25px;
        position: absolute;
        border-radius: 50%;
        background-color:#a2f413;
        color:white;
        margin-left: 125px;
        z-index: 1;
    }
     .munber>p{
         position: absolute;
         font-weight: bolder;
         margin-top: 1px;
         margin-left: 7px;
     }
      .munber1{
        width: 25px;height: 25px;
        position: absolute;
        border-radius: 50%;
        background-color:#a2f413;
        color:white;
        margin-left: 50px;
        z-index: 1;
    }
     .munber1>p{
         position: absolute;
         font-weight: bolder;
         margin-top: 1px;
         margin-left: 7px;
     }
     nav>p{
        position:absolute;
        color:#b0b436;
        font-size: 22px;
        margin:15px;
        cursor: pointer;
        margin-left: 10%;
     }
     #username{
         margin-left: 70%;
         font-size: 16px;
     }
     .loading>img{
      width: 120px;
      height: 120px;
      margin-left: 45%;
      margin-top: 15px;
     }

</style>
